<template>
	<view>
		<scroll-view scroll-y="true" enable-back-to-top="true" lower-threshold="112" class="scrollbox">
			<view class="added_margin">
				<uni-section title="基本信息" type="line">
					<uni-list>
						<uni-list-item title="工作票名称">
							<template v-slot:footer>
								<input class="uni-input" placeholder="请输入" :value="inputClearValue" @input="clearInput" />
							</template>
						</uni-list-item>
						<uni-list-item title="计划操作时间">
							<template v-slot:footer>
								<input class="uni-input" placeholder="请输入" :value="inputClearValue" @input="clearInput" />
							</template>
						</uni-list-item>
						<view class="">
							<uni-section title="工作票内容" type="line"></uni-section>
							<uni-list-item>
								<template v-slot:body>
									<view class="slot-box">
										<input class="uni-input" placeholder="请输入" :value="inputClearValue" @input="clearInput" />
									</view>
								</template>
							</uni-list-item>
						</view>
					</uni-list>
				</uni-section>
			</view>

			<view class="added_margin">
				<uni-section title="申请设备信息" type="line">
					<uni-list>
						<uni-list-item title="设备名称">
							<template v-slot:footer>
								<input class="uni-input" placeholder="请输入" :value="inputClearValue" @input="clearInput" />
							</template>
						</uni-list-item>
						<uni-list-item title="设备编号">
							<template v-slot:footer>
								<input class="uni-input" placeholder="请输入" :value="inputClearValue" @input="clearInput" :style="{ width: inputWidth + 'px' }" />
							</template>
						</uni-list-item>
						<uni-list-item title="设备类型">
							<template v-slot:footer>
								<input class="uni-input" placeholder="请输入" :value="inputClearValue" @input="clearInput" />
							</template>
						</uni-list-item>
						<uni-list-item title="所属部门">
							<template v-slot:footer>
								<input class="uni-input" placeholder="请输入" :value="inputClearValue" @input="clearInput" />
							</template>
						</uni-list-item>
						<uni-list-item title="设备状态">
							<template v-slot:footer>
								<input class="uni-input" placeholder="请输入" :value="inputClearValue" @input="clearInput" />
							</template>
						</uni-list-item>
					</uni-list>
				</uni-section>
			</view>
			<view class="added_steps">
				<uni-section title="审批流程" type="line" padding>
					<uni-steps :options="steps" active-color="#007AFF" :active="active" direction="column" />
				</uni-section>
			</view>
		</scroll-view>

		<u-popup :show="disposalShow" mode="bottom" @close="disposalClose" @open="disposalOpen">
			<view class="disposal_style">
				<view class="">
					<uni-section title="驳回理由" type="line">
						<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>
					</uni-section>
				</view>
				<view class="popup_style">
					<button class="popup_buttom" @click="disposalShow = false" type="submit">提交处理</button>
					<button style="background-color: aliceblue; color: black" class="popup_buttom" @click="disposalShow = false" type="submit">关闭</button>
				</view>
			</view>
		</u-popup>

		<view class="fillLogs_button">
			<button style="background-color: aliceblue; color: black" class="popup_buttom" @click="disposalShow = true" type="submit">驳回</button>
			<button class="popup_buttom" type="submit">同意</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			active: 1,
			value: '',
			disposalShow: false,
			steps: [
				{
					title: '买家下单',
					desc: '2018-11-11'
				},
				{
					title: '卖家发货',
					desc: '2018-11-12'
				},
				{
					title: '买家签收',
					desc: '2018-11-13'
				},
				{
					title: '交易完成',
					desc: '2018-11-14'
				}
			]
		};
	},
	methods: {
		disposalOpen() {
			// console.log('open');
		},
		disposalClose() {
			this.disposalShow = false;
			// console.log('close');
		}
	}
};
</script>

<style scoped lang="scss">
.uni-input {
	width: 100rpx; /* 初始宽度 */
	transition: width 0.2s;
}

.uni-input::placeholder {
	color: #ccc;
}

.uni-input:not(:placeholder-shown) {
	width: auto;
}

.scrollbox {
	height: calc(100vh - 200rpx);
}

.added_margin {
	padding: 20rpx 20rpx 0 20rpx;
}

.added_steps {
	background: #fff;
	margin: 20rpx 20rpx 0 20rpx;
	padding: 20rpx 20rpx 0 20rpx;
}

.fillLogs_button {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100rpx;
	display: flex;
	align-items: center;
	background-color: #fff;
}
.fillLogs_button button {
	width: 40%;
	background-color: #2e87ff;
	color: #fff;
	border-radius: 20rpx;
	height: 80rpx;
	line-height: 80rpx;
}

.fillLogs_button button:hover {
	background-color: #2e87ff;
	box-shadow: 0px 0px 20px -18px;
}

.fillLogs_button button:active {
	transform: scale(0.95);
}

.popup_buttom {
	background-color: #2e87ff;
	color: #fff;
	width: 40%;
	margin: 10rpx aout;
}

.status-btn {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	height: 92rpx;
	margin: 30rpx;
	background-color: #007aff;
}

.example-body {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	padding: 15px;
	flex-direction: row;
}

.popup_style {
	padding: 30rpx;
	display: flex;
	flex-direction: row;
	.popup_buttom {
		background-color: #2e87ff;
		color: #fff;
		width: 40%;
		height: 66rpx;
		font-size: 28rpx;
		line-height: 66rpx;
	}
}

.popup_buttom {
	background-color: #2e87ff;
	color: #fff;
	width: 40%;
	margin: 10rpx aout;
}
</style>
